<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>候选人卡片状态测试</title>
    <link rel="stylesheet" href="/styles/living_workspace.css">
    <link rel="stylesheet" href="/styles/layout_fixes.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 20px;
            background-color: #f8fafc;
        }
        
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .test-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .test-info {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        h1 {
            color: #1e293b;
            text-align: center;
        }
        
        .refresh-btn {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin: 10px;
        }
        
        .refresh-btn:hover {
            background: #2563eb;
        }
        
        .test-results {
            margin-top: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔧 候选人卡片状态显示测试</h1>
        
        <div class="test-info">
            <h3>测试目的:</h3>
            <ul>
                <li>✅ 确保候选人卡片显示状态徽章（激活、待定、拒绝、待评估等）</li>
                <li>❌ 不显示"位置未知"和"0.0"分数</li>
                <li>✅ 保持卡片布局整洁美观</li>
            </ul>
            
            <button class="refresh-btn" onclick="loadCandidates()">加载候选人数据</button>
            <button class="refresh-btn" onclick="location.reload()">刷新页面</button>
        </div>
        
        <div class="test-results" id="testResults">
            <p>点击"加载候选人数据"按钮开始测试...</p>
        </div>
        
        <div class="test-grid" id="candidateGrid">
            <!-- 候选人卡片将在这里显示 -->
        </div>
    </div>

    <!-- 加载必要的脚本 -->
    <script src="/port_fix.js"></script>
    <script src="/scripts/layout_fixes.js"></script>
    <script src="/scripts/candidate_card_fix.js"></script>
    <script src="/scripts/living_workspace.js"></script>
    
    <script>
        // 测试脚本
        let testWorkspace;
        
        function loadCandidates() {
            const resultsDiv = document.getElementById('testResults');
            const gridDiv = document.getElementById('candidateGrid');
            
            resultsDiv.innerHTML = '<p>🔄 正在加载候选人数据...</p>';
            
            // 创建测试用的workspace实例
            if (!testWorkspace) {
                testWorkspace = new LivingWorkspace();
                testWorkspace.elements = {
                    candidateList: gridDiv
                };
            }
            
            // 加载候选人数据
            testWorkspace.loadAllCandidates()
                .then(() => {
                    const candidateCount = testWorkspace.candidateList?.length || 0;
                    resultsDiv.innerHTML = `
                        <h4>📊 测试结果:</h4>
                        <ul>
                            <li>✅ 加载了 ${candidateCount} 个候选人</li>
                            <li>✅ 状态徽章应该显示在卡片右上角</li>
                            <li>❌ 不应显示"位置未知"和"0.0"分数</li>
                            <li>🎨 卡片布局应该整洁美观</li>
                        </ul>
                        <p><strong>请检查下方的候选人卡片是否符合预期！</strong></p>
                    `;
                })
                .catch(error => {
                    resultsDiv.innerHTML = `
                        <h4>❌ 加载失败:</h4>
                        <p>错误: ${error.message}</p>
                        <p>请确保HR系统服务器正在运行...</p>
                    `;
                    console.error('加载候选人数据失败:', error);
                });
        }
        
        // 页面加载完成后自动测试
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎯 候选人卡片状态测试页面已准备就绪');
            setTimeout(loadCandidates, 1000); // 延迟1秒自动加载
        });
    </script>
</body>
</html>


